

<template>
  <div id="app">
    <van-nav-bar :title="$store.state.title" :left-arrow="!$store.state.tabbar" @click-left="onClickLeft"
      @click-right="onClickRight" />
    <router-view />




    <!--  需要用一个全局的变量来使用 -->
    <van-tabbar v-show="$store.state.tabbar" placeholder v-model="active">
      <van-tabbar-item replace to="/" icon="home-o">首页 </van-tabbar-item>
      <van-tabbar-item replace to="/shopcat" :badge="$store.getters.getshoplistNum" icon="search">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="friends-o">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  created() {
    console.log("vuex", this.$store.state.tabbar);
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onClickRight() {

    },
  },
};
</script>

<style scoped>
#app {
  width: 15rem;
  margin: 0 auto;
}



.van-tabbar {
  position: fixed;
}
</style>
